<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="false" @searchHandler="searchHandler">
        <f-search-form-item label="项目名称" name="projectName"/>
        <f-search-form-item label="项目代码" name="projectCode"/>
      </f-search-form>
      <f-table ref="table" rowKey="projectId" :columns="columns" :exportBtn="true" :multiple="false" :operator="operator"
               :params="queryParam" :api="api.project" handler="projectPageListHandler">
        <span slot="state" slot-scope="text, record, index">
          <a-switch v-model="record.state==1" checkedChildren="是" unCheckedChildren="否"
                    @change="(checked) => setState(checked,record)"/>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="$refs.drawer.showDrawer(record)">查看项目</a>
             <a-divider type="vertical"/>
             <a @click="$refs.materialsDrawer.handleShow(record)">清单编辑</a>
             <a-divider type="vertical"/>
             <a @click="$refs.versiondetailDrawer.handleShow(record)">清单履历</a>
             <!-- <a-divider type="vertical"/> -->
             <!-- <a @click="$refs.dept.handleShow(record)">分配权限</a> -->
             <!-- <a-divider type="vertical"/> -->
             <!-- <a @click="sync_approval(record)">审批同步</a> -->
             <!-- <a-divider type="vertical"/> -->
          </template>
<!--          <a-dropdown>-->
<!--            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
<!--            <a-menu slot="overlay">-->
<!--              <a-menu-item v-if="$auth('table.delete')">-->
<!--                <a href="javascript:;" @click="$refs.table.del(record)">删除</a>-->
<!--              </a-menu-item>-->
<!--            </a-menu>-->
<!--          </a-dropdown>-->
        </span>
      </f-table>
      <project-drawer ref="drawer"></project-drawer>
      <materials-drawer ref="materialsDrawer"></materials-drawer>
      <versiondetail-drawer ref="versiondetailDrawer"></versiondetail-drawer>
      <projectdept ref="dept"></projectdept>
    </a-card>
    <div v-if="visible">
      <a-modal
        title="项目选择"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <span>项目名称：</span>
        <a-select
          style="width: 400px; margin-bottom: 15px"
          showSearch
          optionFilterProp="children"
          @change="valueChange"
        >
          <a-select-option v-for="item in projectList" :key="item.projectCode" :value="item.projectCode">
            {{ item.projectName }}
          </a-select-option>
        </a-select>
      </a-modal>
    </div>
  </div>
</template>
<script>
  import projectDrawer from './project_drawer.vue'
  import api from './js/api'
  import MaterialsDrawer from '../materials/materials_drawer'
  import VersiondetailDrawer from '../materials/versiondetail_drawer'
  import Projectdept from './projectdept'

  export default {
    name: 'TableList',
    components: {
      Projectdept,
      VersiondetailDrawer,
      MaterialsDrawer,
      projectDrawer
    },
    data() {
      let me = this
      //操作按钮
      let operator = []
      operator.push({
        name: '同步项目信息',
        icon: '',
        authKey: 'syncProjectFromSrm',
        that: this,
        handler: function(table, that) {
          // that.$refs.drawer.showDrawer()
          that.visible = true
        }
      })
      // operator.push({
      //   name: '删除',
      //   icon: 'delete',
      //   batch: true,
      //   handler: function(table) {
      //     table.remove()
      //   }
      // })
      return {
        api: Object.assign(api, this.api),
        visible: false,
        confirmLoading: false,
        projectList: [],
        projectCode: '',
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '项目编码',
            align: 'center',
            dataIndex: 'projectCode'
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName'
          },
          {
            title: '版本号',
            align: 'center',
            dataIndex: 'bigVersion'
          },
          {
            title: '创建人',
            align: 'center',
            dataIndex: 'userName'
          },
          {
            title: '项目锁定状态',
            align: 'center',
            scopedSlots: { customRender: 'state' },
            dataIndex: 'state'
          },
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'createTime'
          },
          {
            title: '更新时间',
            align: 'center',
            dataIndex: 'updateTime'
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        operator: operator
      }
    },
    created() {
      this.queryParam['isReport'] = false
      this.operator = this.$authBtn(this.operator)
      this.getProjectList()
    },
    methods: {
      //设置项目状态
      setState(check, record) {
        this.http.post(this, {
          url: this.api.project.setState,
          data: {
            ids: record.projectId,
            state: Number(check)
          },
          success(me, data) {
            record.state = data
          }
        })
      },
      sync_approval(record) {
        this.http.post(this, {
          url: this.api.project.syncApproval,
          data: {
            projectId: record.projectId
          },
          success(me, data) {
            me.$message.success(data)
          }
        })
      },
      getProjectList() {
        this.http.get(this, {
          url: this.api.project.getSrmProject,
          data: {},
          success(me, data) {
            me.projectList = data
          },
        })
      },
      handleOk(e) {
        this.confirmLoading = true
        this.sync_projectInfo(this.projectCode)
        setTimeout(() => {
          this.confirmLoading = false
          this.visible = false
        }, 2000)
      },
      handleCancel(e) {
        this.projectCode = ''
        this.visible = false
      },
      valueChange(val) {
        this.projectCode = val
      },
      sync_projectInfo(val) {
        console.log(val)
        this.http.get(this, {
          url: this.api.project.syncSrmProject,
          data: {projectCode: val},
          success(me, data) {
            console.log("OK")
          },
        })
      }
    }
  }
</script>
